drow3DAxes(context);
var input = document.getElementsByTagName("input");
var show = document.getElementById('show');
var refurbish = document.getElementById('refurbish');
refurbish.onclick = function () {
    location.reload();
}

function addHint(){
    for(let i=0;i<=14;i++){
        input[i].onmouseover = hint;
    }
}
addHint();

async function buOnclick() {
    var a1 = input[0].value * 1;
    var b1 = input[1].value * 1;
    var c11 = input[2].value * 1;
    var d1 = input[3].value * 1;
    var e1 = input[4].value * 1;
    var a2 = input[5].value * 1;
    var b2 = input[6].value * 1;
    var c2 = input[7].value * 1;
    var d2 = input[8].value * 1;
    var e2 = input[9].value * 1;
    var a3 = input[10].value * 1;
    var b3 = input[11].value * 1;
    var c3 = input[12].value * 1;
    var d3 = input[13].value * 1;
    var e3 = input[14].value * 1;
    context.lineWidth = 3;
    context.fillStyle = "red";
    context.font = "20pt Times new roman";

    /*
    由（1,0,0）进行旋转缩放
    */
    var x = (a1 - 1) / 10;
    var y = b1 / 10;
    var z = c11 / 10;
    drow3DVector3(context, 1, 0, 0, "red");
    await Sleep(300);
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 3);
        drow3DVector3(context, 1 + x * i, y * i, z * i, "red");
        await Sleep(300);
    }

    /*
     *由（0,1,0）进行旋转缩放
     */
    x = a2 / 10;
    y = (b2 - 1) / 10;
    z = c2 / 10;
    clearCanvas(context, 3);
    drow3DVector3(context, 0, 1, 0, "blue");
    drow3DVector3(context, a1, b1, c11, "red");
    await Sleep(300);
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 3);
        drow3DVector3(context, a1, b1, c11, "red");
        drow3DVector3(context, x * i, 1 + y * i, z * i, "blue");
        await Sleep(300);
    }

    /*
     *由（0,0,1）进行旋转缩放
     */
    x = a3 / 10;
    y = b3 / 10;
    z = (1 - c3) / 10;
    clearCanvas(context, 3);
    drow3DVector3(context, 0, 0, 1, "green");
    drow3DVector3(context, a1, b1, c11, "red");
    drow3DVector3(context, a2, b2, c2, "blue");
    await Sleep(300);
    for (var i = 1; i <= 10; i++) {
        clearCanvas(context, 3);
        drow3DVector3(context, a1, b1, c11, "red");
        drow3DVector3(context, a2, b2, c2, "blue");
        drow3DVector3(context, x * i, y * i, 1 + z * i, "green");
        await Sleep(300);
    }

    await Sleep(2000); //全部绘制完毕后，停顿两秒再进行缩放
    clearCanvas(context, 3);

    /*
     *由d开始对（a,b,c）进行缩放
     */
    var x1 = (a1 - a1 * d1) / 10;
    var y1 = (b1 - b1 * d1) / 10;
    var z1 = (c11 - c11 * d1) / 10;

    var x2 = (a2 - a2 * d2) / 10;
    var y2 = (b2 - b2 * d2) / 10;
    var z2 = (c2 - c2 * d2) / 10;

    var x3 = (a3 - a3 * d3) / 10;
    var y3 = (b3 - b3 * d3) / 10;
    var z3 = (c3 - c3 * d3) / 10;

    var i = 1;
    while (i <= 10) {
        clearCanvas(context, 3);
        drow3DVector3(context, a1 - x1 * i, b1 - y1 * i, c11 - z1 * i, "red");
        drow3DVector3(context, a2 - x2 * i, b2 - y2 * i, c2 - z2 * i, "blue");
        drow3DVector3(context, a3 - x3 * i, b3 - y3 * i, c3 - z3 * i, "green");
        i++;
        await Sleep(300);
    }

    var bb = Math.max(Math.abs(a1 * d1), Math.abs(b1 * d1), Math.abs(c11 * d1), Math.abs(a2 * d2),
        Math.abs(b2 * d2), Math.abs(c2 * d2), Math.abs(a3 * d3), Math.abs(b3 * d3),
        Math.abs(c3 * d3));
    var yes = checkAxes(mycanvas, context, bb, bb, 3); //判断是否超出范围

    await drowCubeXYZ(context, a1 * d1, b1 * d1, c11 * d1, a2 * d2, b2 * d2, c2 * d2, a3 * d3, b3 * d3, c3 * d3,
        true, false);
    if (yes) { //超出范围需要重绘三条基线
        drow3DVector3(context, a3 * d3, b3 * d3, c3 * d3, "green");
        drow3DVector3(context, a1 * d1, b1 * d1, c11 * d1, "red");
        drow3DVector3(context, a2 * d2, b2 * d2, c2 * d2, "blue")
    }

    /*
    *绘制额
    */
    drow3DVector(context, a3 * d3 + a1 * d1 + a2 * d2,
        b3 * d3 + b1 * d1 + b2 * d2,
        c3 * d3 + c11 * d1 + c2 * d2, false);

    e1 = a3 * d3 + a1 * d1 + a2 * d2;
    e2 = b3 * d3 + b1 * d1 + b2 * d2;
    e3 = c3 * d3 + c11 * d1 + c2 * d2;

    input[4].value = e1;
    input[9].value = e2;
    input[14].value = e3;

}

show.onclick = buOnclick;